
import React, {Component} from 'react';
import './index.css'

export default class Item extends Component {
    state ={mouse:false}//标识鼠标移入移出
    handleMouse =(flag)=>{
        return()=>[
            this.setState({mouse:flag})
        ]
    }

    handleChick = (id)=>{
        return(event)=>{
            this.props.changeTodo(id,event.target.checked)
            console.log(id,event.target.checked)
        }
    }

    //删除
    handleDelete =(id)=>{
        if(window.confirm('确定删除吗？')){
            this.props.deleteTodo(id)
        }
    }

    render(){
        const {id ,name,done} = this.props
        const {mouse} = this.state
        return (
            <li style={{backgroundColor:mouse?'#add':'white'}} onMouseLeave={ this.handleMouse(true)} onMouseEnter={this.handleMouse(false)}>
            <label>
                {/*defaultChecked 初始默认值*/}
                {/*选择框*/}
                <input type="checkbox" checked={done} onChange={this.handleChick(id)}/>
                <span>{name}</span>
            </label>
            <button className="btn btn-danger" style={{display:mouse?'block':'none'}} onClick={()=>this.handleDelete(id)}>删除</button>
             </li>
        )
    }
}